<template>
  <div class="home">
    <div class="header">
      <div class="header-wenzi">易洁家政</div>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipeImage in swipeData" :key="swipeImage.id">
          <img :src="swipeImage.url" :alt="swipeImage.introduce" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 菜单栏 -->
    <div class="menu">
      <div class="menu-item" @click="toOrder">
        <img src="../../assets/订单.png" alt="" />
        <br />
        <div class="menu-wenzi">订单</div>
      </div>
      <div class="menu-item" @click="toMoney">
        <img src="../../assets/钱包.png" alt="" />
        <br />
        <div class="menu-wenzi">收益</div>
      </div>
      <div class="menu-item" @click="tohelp">
        <img src="../../assets/帮助.png" alt="" />
        <br />
        <div class="menu-wenzi">帮助</div>
      </div>
      <div class="menu-item" @click="toMine">
        <img src="../../assets/我的.png" alt="" />
        <br />
        <div class="menu-wenzi">我的</div>
      </div>
    </div>

    <!-- 我的订单 -->
    <div class="ddwenzi">我的订单</div>
    <div class="orderDetail">
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :title="order.customer.username"
        @click="toOrderDetail(order.id)"
        class="orderCard"
      >
        <template #thumb class="orderImg">
          <img :src="order.customer.userFace" alt="" />
        </template>
        <template #desc class="orderRight">
          <div class="userAddress">
            {{ order.address.province }}{{ order.address.city
            }}{{ order.address.area }}{{ order.address.address }}
          </div>
          <div class="orderTime">{{ order.orderTime | dateFormat }}</div>

          <div class="serviceStatus">{{ order.status }}</div>
        </template>
      </van-card>
    </div>
    <div style="height: 75px"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapState,mapActions } from 'vuex';
export default {
  data() {
    return {
      swipeData: [],
      orderData: [],
    };
  },
  methods: {
    ...mapActions('user',['getUserInfo']),
    // 获取轮播图图片
    async getSwipePhoto() {
      let res = await get("/carousel/query", { status: "正常" });
      this.swipeData = res.data.data;
    },

    // 获取订单数据
    async getOrderData() {
      let data = {
        page: 1,
        pageSize: 100,
        employeeId: this.userInfo.id,
      };
      let res = await get("/order/pageQuery", data);
      this.orderData = res.data.data.list;
    },
    // 订单页面跳转
    toOrderDetail(orderIndex) {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        path: "/manager/orderView",
        query: {
          orderIndex,
        },
      });
    },
    // 跳往订单页面
    toOrder() {
      this.$router.push({
        path: "/manager/order",
      });
    },
    // 跳往收益页面
    toMoney() {
      this.$router.push({
        path: "/manager/income",
      });
    },
    // 跳往帮助页面
    tohelp() {
      this.$router.push({
        path: "/manager/homeHelp",
      });
    },
    // 跳往我的页面
    toMine() {
      this.$router.push({
        path: "/manager/mine",
      });
    },
  },
  computed:{
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getSwipePhoto();
    this.getOrderData();
    this.getUserInfo()
  },
};
</script>

<style scoped>
.swipe {
  width: 90%;
  height: 160px;
  margin-left: 4%;
  margin-top: -45px;
  margin-bottom: 27px;
  border-radius: 20px 20px 10px 10px !important;
  box-shadow: 1px 3px 6px 2px rgba(32, 32, 32, 0.2);
}
.my-swipe {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 10px 10px !important;
}
.van-swipe__track {
  width: 10px !important;
  height: 100% !important;
  border-radius: 20px 20px 10px 10px !important;
}
.van-swipe-item {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 10px 10px !important;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 10px 10px !important;
}
.menu {
  display: flex;
  margin-left: 8px;
  margin-right: 3px;
}
.menu-item {
  padding: 4px;
  flex: 1;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 3px 1px rgba(32, 32, 32, 0.07);
  border-left: 0;
  margin-right: 7px;
}

.ddwenzi {
  margin-left: 15px;
  margin-top: 15px;
  position: relative;
  top: 5px;
  font-size: 17.5px;
}
.ddwenzi::before {
  display: block;
  content: "";
  clear: both;
}
.orderDetail {
  position: relative;
  margin: 0 20px;
  border-radius: 50px;
}
.orderCard {
  margin-top: 20px !important;
  padding-top: 18px;
  height: 100px;
  border-radius: 12px;
  box-shadow: 2px 2px 5px 1px rgba(137, 135, 135, 0.3);
}
.van-card__thumb {
  width: 80px;
  height: 80px;
  margin-top: -7px;
  margin-right: 15px;
}
.van-card__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 25%;
}
.userAddress {
  font-size: 10px;
  margin-top: 12px;
}
.orderTime {
  margin-top: 12px;
}
.serviceStatus {
  position: absolute;
  top: -5px;
  right: -1px;
  color: #f86429;
  font-size: 13px;
}
/* 头部底部颜色 */
.header {
  background-image: linear-gradient(
    90deg,
    rgb(117, 121, 255),
    rgb(191, 115, 255)
  );
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  height: 100px;
}
.header-wenzi {
  color: rgb(255, 255, 255);
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
    text-align: center;
    font-size: 22px;
    padding-top: 13px;
}
</style>